<template>
    <div class="eleMap">
        <div id="viewDiv">
        </div>
    </div>
</template>

<script>
import * as esriLoader from 'esri-loader'

export default {
  name: 'baseMap',
  data () {
    return {
      view: null,
      /* pointSymbol: {
        type: 'picture-marker', // autocasts as new PictureMarkerSymbol()
        url: require('@/assets/img/location_point.png'),
        width: '40px',
        height: '40px'
      } */
      pointSymbol: {
        type: 'simple-marker', // autocasts as new SimpleMarkerSymbol()
        // color: [226, 119, 40],
        color: [255, 0, 0], // 圆点点的颜色
        outline: { // autocasts as new SimpleLineSymbol()
          // color: [255, 255, 255],
          color: [0, 255, 0], // 圆点点的外圈颜色
          width: 2
        }
      }
    }
  },
  created () {
    esriLoader.loadCss(cssURL)
  },
  mounted () {
    this.createMap()
  },
  methods: {
    createMap () {
      // 引入依赖
      esriLoader.loadModules([
        'esri/Map',
        'esri/views/MapView',
        'esri/geometry/Point',
        'esri/layers/TileLayer',
        'esri/Basemap',
        'esri/Graphic'
      ], { url: dojoURL }).then(([EsriMap, MapView, Point, TileLayer, Basemap, Graphic]) => {
        let test = false
        if (test) {
          this.map = new EsriMap({
            basemap: 'streets'
          })
        } else {
          var layer = new TileLayer({
            url: mapServer
          })
          var customBasemap = new Basemap({
            baseLayers: [layer],
            title: 'geometries',
            id: 'geometries'
          })
          this.map = new EsriMap({
            basemap: customBasemap
          })
        }
        const self = this
        this.view = new MapView({
          container: 'viewDiv',
          center: g_centerPoint,
          zoom: 5,
          map: this.map
        })

        this.view.when(function (evt) {
          setUpClickHandler()
          function setUpClickHandler () {
            self.view.on('click', function (evt) {
              evt.stopPropagation()
              self.view.graphics.removeAll()
              let poinGeometry = new Point({
                'x': evt.mapPoint.longitude,
                'y': evt.mapPoint.latitude
              })
              let pointGraphic = new Graphic({
                geometry: poinGeometry,
                symbol: self.pointSymbol
              })
              self.view.center = evt.mapPoint
              self.view.graphics.add(pointGraphic)
              let data = [
                {
                  'latitude': evt.mapPoint.latitude,
                  'longitude': evt.mapPoint.longitude
                }
              ]
              self.$axios({
                url: baseURL + '/api/jp-BSM-MAP-ms/planning/regeoCode/filter',
                method: 'post',
                data: data
              }).then(res => {
                let address = JSON.parse(res.request.response).data[0].address
                self.view.popup.open({
                  // Set the popup's title to the coordinates of the location
                  title: '事件地点',
                  location: evt.mapPoint // Set the location of the popup to the clicked location
                })
                self.view.popup.content = address
                let msg = {
                  'address': address,
                  'point': data
                }
                self.$emit('mapLocationFn', msg)
              })
              // console.log(evt.mapPoint)
            })
          }
        })
      })
    }
  },
  watch: {

  }
}
</script>

<style scoped>
    .eleMap {
        width: 100%;
        height: 100%;
    }
    #viewDiv {
        width: 100%;
        height: 100%;
        z-index: -1;
    }
    .action-button {
        font-size: 16px;
        background-color: white;
        border: 1px solid #D3D3D3;
        color: #6e6e6e;
        height: 32px;
        width: 32px;
        text-align: center;
        box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
    }

    .action-button:hover,
    .action-button:focus {
        background: #0079c1;
        color: #e4e4e4;
    }
</style>
